<!--
 * @Description: 
 * @Version: 1.0
 * @Autor: gaoluo
 * @Date: 2021-08-24 17:07:26
 * @LastEditors: gaoluo
 * @LastEditTime: 2021-11-18 16:57:12
 * @FilePath: /nhw/src/views/Work/Snapshot/SnapshotDetails.vue
-->
<template>
  <Layout class="snapshot-details-container" title="随手拍详情">
    <template #default>
      <!-- 表单 start -->
      <h2>随手拍记录-{{ stateText }}</h2>
      <section>
        <Cell :value="orderData.rpcId" title="随手拍编号" />
        <Cell :value="orderData.rpcName" title="安全隐患种类" />
        <Cell :value="orderData.rpcArea" title="地址" />
        <Cell :value="orderData.findUser" title="反馈人" />
        <Cell :value="orderData.remark" title="情况描述" />
        <div v-if="pic[0]">
          <Cell title="现场照片" class="bordernone" />
          <div class="img-wrap">
            <VanImage
              v-for="(item, index) in pic"
              :key="index"
              width="2.8rem"
              height="2.8rem"
              :src="/nhw/ + item"
              @click="imagePreview(index)"
            />
          </div>
        </div>
        <div v-if="video">
          <Cell title="现场视频" class="bordernone" />
          <div class="img-wrap">
            <PrevVideo :videoUrl="/nhw/ + video" :control="false" />
          </div>
        </div>
      </section>
      <section v-if="orderData.resolveEndTime">
        <h4>任务信息</h4>
        <Cell :value="orderData.resolveEndTime" title="整改截止时间" />
        <Cell :value="orderData.resolveUser" title="整改人" />
      </section>
      <section v-if="orderData.finishType">
        <h4>整改信息</h4>
        <Cell :value="orderData.finishType" title="完成情况" />
        <Cell :value="orderData.finishTime" title="实际完成时间" />
        <Cell :value="orderData.finishContent" title="整改措施" />
        <div v-if="finishPic[0]">
          <Cell title="照片" class="bordernone" />
          <div class="img-wrap">
            <VanImage
              v-for="(item, index) in finishPic"
              :key="index"
              width="2.8rem"
              height="2.8rem"
              :src="/nhw/ + item"
              @click="imagePreviewFinish(index)"
            />
          </div>
        </div>
      </section>
      <section v-if="orderData.checkFinishTime">
        <h4>验收信息</h4>
        <Cell :value="orderData.checkFinishTime" title="验收时间" />
        <Cell :value="orderData.checkFinishType" title="验收情况" />
        <Cell :value="orderData.checkFinishContent" title="验收意见" />
      </section>
      <!-- 表单 end -->
      <!-- 查看流程按钮 start-->
      <SideBtn
        v-if="isFromRecord"
        :to="{
          name: 'WorkflowSteps',
          params: {
            workflowId: 'rskmgProblemClap',
            pkValue: $route.query.rpcNo,
          },
        }"
      />
      <!-- 查看流程按钮 end-->
    </template>
  </Layout>
</template>

<script>
import Layout from "components/Layout";
import SideBtn from "components/SideBtn";
import PrevVideo from "components/PrevVideo";
import { Image as VanImage, ImagePreview, Cell } from "vant";

import { problemDetails } from "@/api/work.js";

export default {
  name: "SnapshotDetails",

  components: {
    Layout,
    VanImage,
    SideBtn,
    PrevVideo,
    Cell,
  },

  data() {
    return {
      orgNo: "",
      stateText: "", //状态
      orderData: {},
      pic: [], //图片路径，
      video: "", //视频路径
      finishPic: [], //整改图片路径
      isFromRecord: true,
    };
  },

  created() {
    this.orgNo = window.localStorage.getItem("orgNo");
    this.getDetails(this.$route.query.rpcNo);
    this.stateText = this.$route.query.stateName;
  },
  beforeRouteEnter(to, from, next, vm) {
    next((vm) => {
      vm.isFromRecord =
        from.name === "SnapshotRecord" || from.name === "WorkflowSteps";
    });
  },

  mounted() {
    // this.$toast("提示文案");
  },

  methods: {
    async getDetails(orderNo) {
      const data = {
        rpcNo: orderNo,
        orgNo: this.orgNo,
      };
      const res = await problemDetails(data);
      this.orderData = res.param.data;
      this.pic = this.orderData.pic.split(",");
      this.finishPic = this.orderData.finishPic.split(",");
      this.video = this.orderData.video;
    },
    //图片预览
    imagePreview(index) {
      let urlArr = this.pic.map((item) => {
        return "/nhw/" + item;
      });
      ImagePreview([...urlArr], index);
    },
    //完成图片预览
    imagePreviewFinish(index) {
      let urlArr = this.finishPic.map((item) => {
        return "/nhw/" + item;
      });
      ImagePreview([...urlArr], index);
    },
  },
};
</script>

<style lang="less" scoped>
@import url("~style/mixin.less");
.snapshot-details-container {
  h2 {
    color: #fff;
    line-height: 3em;
    text-indent: 0.4em;
    position: relative;
  }
  section {
    .card();
    background: #fff;
    position: relative;
    padding-bottom: 20px;
    margin-bottom: 20px;
    h4 {
      padding: 10px 0 0 32px;
      font-size: 32px;
    }
  }
  .img-wrap {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 0 20px;
    .van-image {
      margin: 10px 0;
    }
  }
}
.bordernone.van-cell::after {
  display: none;
}

/deep/ .van-cell__title > span::after {
  content: ":";
  display: inline-block;
}
/deep/ .van-cell__title {
  width: 200px;
  flex: none;
}

/deep/ .wrap {
  .backOrange();
}
</style>